/*
 * @Date: 2022-03-29 12:57:09
 * @LastEditors: fenglan
 * @LastEditTime: 2022-03-29 12:57:10
 * @FilePath: /payment/pay/src/pages/PayGround/PayGroundAccunt.jsx
 */
import React from "react";
import Tab from "../../components/Tabs";
import { SearchOutlined } from "@ant-design/icons";
import { Row, Col, Select, DatePicker, Space, Button, Table ,ConfigProvider} from "antd";
import zhCN from "antd/es/locale/zh_CN";

export default function PayGroundAccunt() {
  const { Option } = Select;

  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  function onChange(date, dateString) {
    console.log(date, dateString);
  }
  const [placement] = React.useState("topLeft");

  const columns = [
   
    {
      title: '记录ID',
      dataIndex: 'age',
      defaultSortOrder: 'descend',
      width: 160,
      fixed: 'left',
      sorter: (a, b) => a.age - b.age,
    },
    {
      title: '类型',
      dataIndex: 'lei',
      defaultSortOrder: 'descend',
      width: 120,
      sorter: (a, b) => a.lei - b.lei,
    },
    {
      title: '商户名称',
      dataIndex: 'names',
      key: '1',
      width: 150,
    },
    {
      title: '商户号',
      dataIndex: 'number',
      key: '2',
      width: 150,
    },
    {
      title: '订单号',
      dataIndex: 'address',
      key: '3',
      width: 150,
    },
    {
      title: '变动前金额',
      dataIndex: 'address',
      key: '4',
      width: 150,
    },
    {
      title: '变动金额',
      dataIndex: 'address',
      key: '4',
      width: 150,
    },
    {
      title: '变动后金额',
      dataIndex: 'address',
      key: '4',
      width: 150,
    },
    {
      title: '操作人',
      dataIndex: 'address',
      key: '4',
      width: 150,
    },
    {
      title: '操作人',
      dataIndex: 'address',
      key: '4',
      width: 150,
    },
    {
      title: '操作角色',
      dataIndex: 'hero',
      defaultSortOrder: 'descend',
      width: 150,
      sorter: (a, b) => a.lei - b.lei,
    },
    {
      title: '操作时间',
      dataIndex: 'time',
      key: '4',
      width: 150,
    },
  ];
  
  const data = [
    {
      key: '1',
      age: 1122,
      lei: '扣款',
      hero:'商户',
      names:123456,
      number:'2022012756368828',
      address: `London Park no`,
      time:'2022-03-29 18:44:19'
    },
    {
      key: '2',
      age: 1142,
      lei: '冲正',
      hero:'管理员',
      names:123456,
      number:'2022012756368828',
      address: `London Park no`,
      time:'2022-03-29 18:44:19'
    },
    {
      key: '3',
      age: 1132,
      lei: '代付',
      hero:'商户',
      names:123456,
      number:'2022012756368828',
      address: `London Park no`,
      time:'2022-03-29 18:44:19'
    },
    {
      key: '4',
      age: 1032,
      lei: '扣款',
      hero:'管理员',
      names:123456,
      number:'2022012756368828',
      address: `London Park no`,
      time:'2022-03-29 18:44:19'
    },
  ];
  
  function onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
  }
//


  return (
    <div>
      <Tab title={"商户账变"} />

      <Row style={{ marginTop: "30px" }}>
        <Col span={4}>
          <Select
            defaultValue="商户"
            style={{ width: 200 }}
            onChange={handleChange}
            size="large"
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </Col>
        <Col span={4}>
          <Select
            defaultValue="账变类型"
            style={{ width: 200 }}
            onChange={handleChange}
            size="large"
          >
            <Option value="jack">上分</Option>
            <Option value="lucy">下分</Option>
            <Option value="jack">扣款</Option>
            <Option value="lucy">退款</Option>
            <Option value="jack">返利</Option>
            <Option value="lucy">冲正</Option>
          </Select>
        </Col>
        <Col span={4}>
          <Select
            defaultValue="商户"
            style={{ width: 200 }}
            onChange={handleChange}
            size="large"
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </Col>
        <Col span={4}>
          <Space direction="vertical">
            <DatePicker
              onChange={onChange}
              style={{ width: 200 }}
              size="large"
              placeholder={"开始日期"}
            />
          </Space>
        </Col>
        <Col span={4}>
          <Space direction="vertical">
            <DatePicker
              placement={placement}
              style={{ width: 200 }}
              size="large"
              placeholder={"结束日期"}
            />
          </Space>
        </Col>

        <Col span={2} style={{ textAlign: "right" }}>
          <Button type="primary" icon={<SearchOutlined />} size="large" >
            搜索
          </Button>
         
        </Col>
      </Row>

      <ConfigProvider locale={zhCN}>
      <Table  columns={columns} dataSource={data} onChange={onChange} style={{marginTop:"20px"}} scroll={{ x: 2200 }}  />
      </ConfigProvider>
    </div>
  );
}
